<template>
  <el-drawer :visible.sync="visible" :title="title" :modal-append-to-body="true" :append-to-body="true"
    :destroy-on-close="false" :modal="true" direction="rtl" :wrapperClosable="false" custom-class="form-drawer"
    size="480px" @closed="closed">
    <div class="form-drawer__content">
      <el-form :inline="true" class="demo-form-inline" style="flex:none;padding-top: 0px;
      padding-bottom: 5px;
      padding-left: 5px;">
        <el-form-item style="margin-bottom: 10px">
          <el-button type="primary" icon="el-icon-plus" @click="handleAddLayer">添加图层</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border empty-text="暂无数据." highlight-current-row style="width: 100%">
        <el-table-column prop="layerName" label="图层名称" />
        <el-table-column prop="isDisplay" label="显示" align="center" width="60">
          <template slot-scope="scoped">
            <el-switch v-model="scoped.row.isDisplay" :active-value='1' :inactive-value='0'
              @change="changeStatus(scoped.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="isCtrl" label="控制" align="center" width="60">
          <template slot-scope="scoped">
            <el-switch v-model="scoped.row.isCtrl" :active-value='1' :inactive-value='0'
              @change="changeStatus(scoped.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="130">
          <template slot-scope="scoped">
            <el-input-number v-model="scoped.row.sort" @change="changeStatus(scoped.row)" :min="1" :max="100">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <!-- <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button> -->
      </div>
    </div>

  </el-drawer>
</template>

<script>
  import {
    getLayerByMenu,
    deleteMenuLayer,
    updateMenuLayer,
  } from '@/api/subsystem/scenemenu'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'MenuLayerDialog',
    components: {},
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {},
    watch: {
      properties: {
        handler: function(value) {
          this.visible = value.visible
          this.menuId = value.menuId
          this.type = value.type
          if (value.data && value.data.length > 0) {
            this.tableData = value.data
          }
        },
        immediate: true,
        deep: false
      }
    },
    data() {
      return {
        visible: false,
        title: '菜单图层',
        menuId: '',
        type: '0',
        loading: false,
        tableData: [],
      }
    },
    created() {
      if (this.type == '0') this.load()
    },
    methods: {
      load() {
        this.loading = true
        getLayerByMenu({
            projectId: this.$store.getters.projectId,
            menuId: this.menuId
          }).then(rsp => {
            if (isOk(rsp)) {
              this.tableData = rsp.result
              this.loading = false
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleAddLayer: function() {
        this.$emit('openLayerd')
      },
      changeStatus: function(row) {
        updateMenuLayer(row).then(rsp => {
          if (isOk(rsp)) {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 500
            })
          }
        })
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.layerName + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteMenuLayer({
              menuId: this.menuId,
              layerId: data.layerId
            }).then(response => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 500
              })
              this.load()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }
</script>


<style scoped>
  /deep/.form-drawer__footer button {
    flex: 1;
  }

  /deep/.el-drawer__body {
    overflow-y: auto;
  }

  /deep/.form-drawer__content {
    overflow-y: auto;
  }

  /deep/.el-table {
    overflow-y: auto;
  }

  /deep/.el-input-number--medium {
    width: 100px;
    line-height: 20px;
  }


  /deep/.el-input-number--medium .el-input-number__increase {
    width: 18px;
    font-size: 12px;
  }

  /deep/.el-input-number--medium .el-input-number__decrease {
    width: 18px;
    font-size: 12px;
  }

  /deep/.el-input--medium .el-input__inner {
    height: 22px;
    line-height: 22px;
    padding-left: 30px;
    padding-right: 30px;
  }

  /deep/.el-input-number .el-input {
    height: 22px;
  }

  /deep/.el-switch {
    font-size: 12px !important;
    line-height: 16px !important;
    height: 15px !important;
  }

  /deep/.el-switch__core {
    width: 30px !important;
    height: 15px !important;
  }

  /deep/.el-switch__core:after {
    width: 12px !important;
    height: 12px !important;
  }

  /deep/.el-switch.is-checked .el-switch__core::after {
    left: 115%;
    margin-left: -17px;
  }
</style>
